<template>
    <div id="Cardintroduce">
        <div>
            <div class="cardintroduce_div1">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/card' }">会员卡首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.cardName}}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-row v-for="item in cardList" :key="item.id">
                    <el-row>
                        <el-col :span="20">
                            <p class="cardintroduce_p_1">{{item.cardName}}</p>
                        </el-col>
                        <el-col :span="2" style="margin-top:50px;" >
                            <el-button type="primary" @click="buyCard">购买/续费</el-button>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:20px;background-color:#f5f5f5;border: 1px solid #e8e8e8;">
                        <el-col :span="6" :push="5">
                            <img :src="'http://127.0.0.1:8082/getImageById?id=' + item.coverId " class="cardintroduce_img_1">
                        </el-col>
                        <el-col :span="6" :push="8">
                            <img :src="'http://127.0.0.1:8082/getImageById?id=' + item.coverId " class="cardintroduce_img_1">
                        </el-col>
                    </el-row>
                </el-row>
                <el-row>
                    <el-col :span="23" >
                        <p class="cardintroduce_p_2">会员特权</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/abc.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">里程抵现</p>
                        <p>APP专享 100：1</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/d.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">升级礼包</p>
                        <p >升级有好礼</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/b.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">商城会员价</p>
                        <p>尊享会员折扣</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/c.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">里程加速</p>
                        <p>越多消费，越多里程</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/a.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">火车贵宾厅</p>
                        <p>舒适等待</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/j.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">免费泊车</p>
                        <p >机场停车 首日免费</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/e.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">酒店折扣</p>
                        <p >优惠享受酒店会员价</p>
                    </el-col>
                    <el-col :span="5"  :push="1" style="margin-top:60px;text-align: center;">
                        <img src="../../img/f.png" class="cardintroduce_img_2">
                        <p class="cardintroduce_p_3">生日礼包</p>
                        <p >生日会员专属礼包</p>
                    </el-col>
                </el-row>
            </div>    
        </div>
  </div>
</template>

<script>
const axios = require('axios');
export default {
    name:'Cardintroduce',
    data(){
        return{
            id:'', //存放会员卡id
            cardList:[], //存放查询集合
            cardName:'',  //会员卡名称
        }
    },
    methods:{
        //查询已选择会员卡类型
       getCardType(){
            this.id = this.$route.query.id
            axios.get('http://127.0.0.1:8082/card/getCardType?cardId='+ this.id).then(res=>{
                this.cardList = res.data.obj
                this.cardList.forEach((item)=>{
                    this.cardName = item.cardName
                })
            }).catch(error => {
                    this.$message.error('查询会员卡类型失败！');
            })
       },
       buyCard(){
             this.$router.push({name:'BuyCard', query:{id: this.id}})
       }
    },
    mounted(){
        this.getCardType()
    }

}
</script>

<style scoped>
.cardintroduce_div1{
    margin:0 auto;
    width:1200px;
    height:800px;
    margin-top:30px;
}
.cardintroduce_p_1{
    font-size:22px;
    font-weight: bold;
    color:#0166cc;
    margin-top:50px;
}
.cardintroduce_img_1{
    width:262px;
    height:166px;
}
.cardintroduce_img_2{
    width:114px;
    height:114px;
}
.cardintroduce_p_2{
    font-size:22px;
    font-weight: bold;
    margin-top:50px;
    text-align: center;
}
.cardintroduce_p_3{
    font-size:18px;
    font-weight: bold;
    margin-top:10px;
    margin-bottom:6px;
}
.cardintroduce_p_4{
    font-size:14px;
    text-align: center;
    margin-top:20px;
    color:#999;
}
.cardintroduce_img_3{
    width:280px;
    height:162px;
}
</style>